動畫:搖擺、旋轉、呼吸、替換、可變顏色 SF Symbols (指南)
搖擺 (Wiggle)
搖擺預設適用於在符號上突出顯示變化或呼籲行動,增加動態強調,並強化符號所代表的意義。它可以為互動新增動態的強調效果,或者強化符號所表示的內容。
水平、垂直、旋轉、自定義角度
對於紙飛機符號,我們可以指定315度的角度,使紙飛機看起來像要起飛一樣。許多符號,如紙飛機,具有內建的首選方向,但使用者仍然可以根據應用需求自定義動畫方向。
旋轉 (Rotate)
旋轉預設透過模擬現實世界中物體的行為或作為視覺指示器來為符號新增動態運動。例如,當任務正在進行中時,旋轉可以確認任務按預期進行。
呼吸 (Breathe)
呼吸預設透過平滑地增加和減少符號的存在感,賦予其生動的特性。它有助於傳達狀態變化或訊號活動正在進行中。例如,當有錄音會話正在進行時,呼吸動畫可以表示這種狀態。
與脈衝 (Pulse) 的比較:脈衝透過改變不透明度來傳達持續活動,而呼吸則同時使用不透明度和大小來影響符號在運動中的外觀。如果不確定選擇哪種預設,可以問自己:我想傳達什麼?例如,如果希望心形符號具有更多存在感並且看起來更有生命力,那麼呼吸預設更適合。
替換 (Replace)
替換動畫預設用於將一個符號替換為另一個符號。今年,替換預設有一個新的絕佳選項,Magic Replace 是在具有相關形狀的兩個符號之間進行智慧過渡。例如,斜線可以繪製和刪除,徽章可以獨立於基礎符號出現、消失或被替換。
Magic Replace:
回退機制:當符號不相關時,將使用標準的動畫替換,並可以控制回退動畫的方向。例如,當符號之間進行 Magic Replace 時,相關符號之間會有過渡,而更換為人物符號時會使用 Off-Up 動畫。這非常適合可點選的元素。
/Untitled 4.png)
可變顏色 (Variable Color)
可變顏色預設顯示符號在一段時間內狀態變化時的不同強度級別,透過顏色變化來傳達這些變化。今年,我們改進了這一動畫的重複性。
符號的設計影響動畫在重複時的效果。對於某些符號,顏色不透明度從一個點逐漸變化到另一個點,這種情況下稱為開放環。
而當兩個端點相遇時,動畫則稱為閉合環。
在重複可變顏色時,我們透過尊重每個符號的本質,改進了閉合環設計,以實現無縫的連續播放。
實際應用:
一個專為植物愛好者開發的示例應用程式。該應用幫助使用者記錄植物、跟蹤必要的護理活動,並監控植物的健康狀況。
/Untitled 5.png)
A 天氣警報 - 替換 :
當有可能影響植物健康的天氣事件時,使用 Magic Replace 進行警告。該功能在兩個符號之間進行平滑過渡,是目前最好的替換方式,推薦儘可能使用。
/Untitled.gif)
B 新增植物 - 搖動:
使用者可以掃描環境並檢測家中的植物型別。一旦檢測到,應用程式會顯示植物的名稱和相關資訊。為了清晰地指示螢幕上的首選操作,按鈕內的尖頭符號開始搖動。這種動畫吸引注意力,並傳達可以將這株龜背竹新增到植物收藏中。如果您的UI視覺複雜,可以嘗試這種動畫來幫助使用者導航。
/Untitled 6.png)
/Untitled 1.gif)
C 實時活動-旋轉:
箭頭旋轉,表示有任務正在進行。
/Untitled 2.gif)
D 澆水計時器-呼吸
在檢查植物健康和水分攝入量的檢視中,給蘭花澆水的好方法是將其根部浸泡約15分鐘。一旦啟動計時器,水滴使用呼吸預設進行動畫處理,提供視覺反饋,顯示活動正在進行。
/Untitled 7.png)
/Untitled 3.gif)
動畫在使用者介面中很有用,但用太多或用錯地方會讓人覺得煩和分心,影響重要內容和操作。所以,最好有目的和有計劃地使用動畫,確保它們能提升使用者體驗而不是分散注意力。
/Untitled.png)
/Untitled 1.png)
/Untitled 2.png)
/Untitled 3.png)